<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-tabs v-model:activeKey="pageSet.searchType" @change="changeTab">
        <a-tab-pane :key="1" tab="日账单"> </a-tab-pane>
        <a-tab-pane :key="2" tab="周账单"> </a-tab-pane>
        <a-tab-pane :key="3" tab="月账单"> </a-tab-pane>
      </a-tabs>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '操作'">
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="construction(2, record)"
              >查看订单</span
            >
          </template>
          <template v-if="column.title == '备注'">
            <a-tooltip>
              <template #title>{{ text }}</template>
              <div class="font-left nowrap">{{ text }}</div>
            </a-tooltip>
          </template>
          <template v-if="column.title == '交易金额'">
            <span v-if="record.financeType == 2" style="color: red"
              >+{{ formatMoney(text, true) }}</span
            >
            <span v-else style="color: green"
              >-{{ formatMoney(text, true) }}</span
            >
          </template>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <!-- 订单详情 -->
      <OrderConfirmation ref="OrderConfirmationRef"></OrderConfirmation>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {message, Modal} from "ant-design-vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {formatMoney} from "@/utils/common";
import OrderConfirmation from "@/views/orderManagement/OrderConfirmation.vue";
import {
  orderFinanceLogPage,
  orderFinanceLogDetail,
  orderFinanceLogDelete
} from "@/api/finance/journalAccount";
import {orderDetail} from "@/api/orderManagement/orderManagementList";
const OrderConfirmationRef = ref();
const form = ref<any>({});
const tableLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const visible = ref(false);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  searchType: 1
});
const changeTab = (e) => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0,
    searchType: e
  };
  loadPagination(true);
};
//操作
const construction = (type: Number, data?: any) => {
  if (type == 1) {
    //创建
    form.value = {};
    visible.value = true;
  } else if (type == 2) {
    //查看
    useAppStore.loading = true;
    orderDetail({id: data.sourceId})
      .then((res) => {
        OrderConfirmationRef.value.operation(res.data, false);
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 3) {
    //删除
    Modal.confirm({
      title: "提示",
      content: "确定要删除吗",
      onOk() {
        useAppStore.loading = true;
        orderFinanceLogDelete({id: data.id}).then(() => {
          message.success("删除成功");
          useAppStore.loading = false;
        });
      }
    });
  }
};
//获取数据
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  orderFinanceLogPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination();
//重置
const tableData = ref<Array<object>>([]);
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "交易单号",
    dataIndex: "tradeCode",
    align: "center",
    width: 240
  },
  {
    title: "订单来源",
    dataIndex: "sourceType",
    align: "center",
    width: 120,
    customRender: ({text}) => {
      return text == 1 ? "支付订单" : "退款订单";
    }
  },
  {
    title: "来源单号",
    dataIndex: "sourceCodeSN",
    align: "center",
    width: 240
  },
  {
    title: "交易金额",
    dataIndex: "amount",
    align: "center",
    width: 100
  },
  {
    title: "财务类型",
    dataIndex: "financeType",
    align: "center",
    width: 100,
    customRender: ({text}) => {
      return text == 1 ? "支出" : "收入";
    }
  },
  {
    title: "支付方式",
    dataIndex: "payWay",
    align: "center",
    width: 100,
    customRender: ({text}) => {
      if (text == 1) {
        return "支付宝";
      } else if (text == 2) {
        return "线下汇款";
      } else if (text == 3) {
        return "授信支付";
      }
    }
  },
  {
    title: "交易用户名称",
    dataIndex: "memberName",
    align: "center",
    width: 160
  },
  {
    title: "交易时间",
    dataIndex: "tradeTime",
    align: "center",
    width: 220
  },
  {
    title: "备注",
    dataIndex: "remark",
    align: "center",
    width: 180
  },
  {
    title: "操作",
    dataIndex: "d",
    align: "center",
    width: 100,
    fixed: "right"
  }
]);
</script>

<style lang="less" scoped></style>
